<!DOCTYPE html>
<html>
<head>
	<title>css绘制三角形</title>
	<style type="text/css">
		/*#app {
			width: 100px;
			height: 100px;
			border: 1px solid rgb(225, 112, 85);
		}*/

		#triangle-up {
			width: 0;
			height: 0;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-bottom: 100px solid rgb(253, 203, 110);
		}


		#triangle-down {
		    width: 0;
		    height: 0;
		    border-left: 50px solid transparent;
		    border-right: 50px solid transparent;
		    border-top: 100px solid rgb(85, 239, 196);
		}

		#triangle-left {
		    width: 0;
		    height: 0;
		    border-top: 50px solid transparent;
		    border-right: 100px solid rgb(116, 185, 255);
		    border-bottom: 50px solid transparent;
		}

		#triangle-right {
		    width: 0;
		    height: 0;
		    border-top: 50px solid transparent;
		    border-left: 100px solid rgb(9, 132, 227);
		    border-bottom: 50px solid transparent;
		}

		#triangle-topleft {
		    width: 0;
		    height: 0;
		    border-top: 100px solid rgb(108, 92, 231);
		    border-right: 100px solid transparent;
		}


		#triangle-topright {
		    width: 0;
		    height: 0;
		    border-top: 100px solid rgb(225, 112, 85);
		    border-left: 100px solid transparent; 
		}


		#triangle-bottomleft {
		    width: 0;
		    height: 0;
		    border-bottom: 100px solid rgb(232, 67, 147);
		    border-right: 100px solid transparent;
		}


		#triangle-bottomright {
		    width: 0;
		    height: 0;
		    border-bottom: 100px solid rgb(127, 140, 141);
		    border-left: 100px solid transparent;
		}
	</style>
</head>
<body>
	<div id="app">
		<div id="triangle-up"></div>
		<div id="triangle-down"></div>
		<div id="triangle-left"></div>
		<div id="triangle-right"></div>

		<div id="triangle-topleft"></div>
		<div id="triangle-topright"></div>
		<div id="triangle-bottomleft"></div>
		<div id="triangle-bottomright"></div>
	</div>
</body>
</html>